<template>
  <div class="staff-container">
     <div class="staff-top">
        <h4 class="title">员工管理</h4>
        <div class="search-box">
          <el-row>
            <el-col :span="12">
              <div class="grid-content">
                姓名：<el-input v-model="keyWords" placeholder="请输入姓名"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="handleClear">清除搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
     </div>
    <div class="table-content">
      <el-table
        :data="staffList"
        style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="realName" label="姓名"></el-table-column>
        <el-table-column prop="nickName" label="微信昵称"></el-table-column>
        <el-table-column prop="departmentName" label="部门"></el-table-column>
        <el-table-column prop="levelName" label="身份"></el-table-column>
        <el-table-column prop="telephone" label="手机号"></el-table-column>
        <el-table-column  fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="scope.row.openId"
              @click="handleUnbundling(scope.$index, scope.row)">解除绑定
            </el-button>
            <el-button
              size="mini"
              v-if="!scope.row.openId"
              @click="handleBundling(scope.$index, scope.row)">绑定
            </el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="pageIndex"
          @current-change="currentChange"
          :page-count="pageCount">
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      width="40%">
     <div class="pop-box">
       <div class="grid-content">
         <p>姓名：</p> <el-input v-model="realName" placeholder="请输入姓名"></el-input>
       </div>
       <div class="grid-content">
         <p>微信昵称：</p>{{userName}}
       </div>
       <div class="grid-content">
         <p>手机号：</p><el-input v-model="telephone" type="number" maxlength="11" placeholder="请输入手机号"></el-input>
       </div>
       <div class="grid-content">
         <p>部门：</p>
         <el-select v-model="departmentId" placeholder="请选择">
         <el-option
           v-for="item in departmentList"
           :key="item.id"
           :label="item.departmentName"
           :value="item.id">
         </el-option>
       </el-select>
       </div>
       <div class="grid-content">
         <p>身份：</p>
         <el-select v-model="levelId" placeholder="请选择">
           <el-option
             v-for="item in levelList"
             :key="item.id"
             :label="item.position"
             :value="item.id">
           </el-option>
         </el-select>
       </div>
     </div>
      <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="handleSubmit">确 定</el-button>
       </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleBundling"
      :show-close="false"
      :close-on-click-modal="false"
      width="30%">
     <div class="pop-box">
       <div class="grid-content">
         <p>微信号：</p>
         <el-select v-model="weixinId" placeholder="请选择微信号">
           <el-option
             v-for="item in weixinList"
             :key="item.openid"
             :label="item.nickname"
             :value="item.openid">
           </el-option>
         </el-select>
       </div>
     </div>
      <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisibleBundling = false">取 消</el-button>
           <el-button type="primary" @click="bundling">确 定</el-button>
       </span>
    </el-dialog>
  </div>
</template>

<script>
  import apiDataFilter from "../../../utils/apiDataFilter";

  export default {
    name: "staff",
    data(){
      return{
        staffList:[],
        pageIndex:1,
        pageCount:null,
        dialogVisible:false,
        realName:'',
        employeeId:'',
        userName:'',
        telephone:null,
        departmentId:'',
        departmentList:[],
        keyWords:'',
        id:'',
        dialogVisibleBundling:false,
        weixinList:[],
        weixinId:'',
        levelList:[{id:0,position:'管理员'},{id:1,position:'员工'},{id:2,position:'经纪人'}],
        levelId:2,
      }
    },
    methods:{
      getStaffList(){
        let param = {page:this.pageIndex,pageSize: 10};
        this.keyWords ? Object.assign(param,{keyWords:this.keyWords}):'';
        apiDataFilter.request({
          apiPath:'member.getMembers',
          method:'post',
          data:param,
          successCallback:(res)=>{
            this.staffList = res.data.list;
            this.pageCount = Math.ceil(res.data.totalCount/10);
          }
        })
      },
      /*微信list*/
      getWeixinsNoMember(){
        apiDataFilter.request({
          apiPath:'wechat.getWeixinsNoMember',
          successCallback:(res)=>{
            this.weixinList =res.data;
            this.dialogVisibleBundling = true;
          }
        })
      },
      /*获取部门*/
      getDepartments(){
        let param = {page: 1,pageSize:200};
        apiDataFilter.request({
          apiPath:'department.getDepartments',
          data:param,
          method:'post',
          successCallback:(res)=>{
             this.departmentList = res.data.list
          }
        })
      },
      /*修改员工*/
      memberUpdata(){
        let param = {realName:this.realName,telephone:this.telephone,departmentId:this.departmentId,
          level:this.levelId,id:this.id};
        apiDataFilter.request({
          apiPath:'member.memberUpdata',
          method:'post',
          data:param,
          successCallback:(res)=>{
            this.$message.success('提交成功');
            this.dialogVisible = false;
            this.getStaffList();
          }
        })
      },
      bundling(){
        if ( this.weixinId){
          let param = {memberId:this.id,openid:this.weixinId}
          apiDataFilter.request({
            apiPath:'wechat.bundling',
            data:param,
            method:'post',
            successCallback:()=>{
               this.$message.success('绑定成功');
              this.dialogVisibleBundling = false;
              this.getStaffList();
            }
          })
        }else {
          this.$message.error('请选择微信号')
        }

      },

      handleSubmit(){
        if (!this.realName || !this.telephone || this.telephone == ' '){
          this.$message.error('请完善信息');
          return;
        }
        this.memberUpdata();
      },
      handleClear(){
        this.keyWords = '';
        this.pageIndex = 1;
        this.getStaffList();
      },
      handleSearch(){
        this.pageIndex = 1;
        this.getStaffList();
      },
      currentChange(val){
        this.pageIndex = val;
        this.getStaffList();
      },
      /*绑定*/
      handleBundling(index,row){
        this.id = row.id;
        this.weixinId = '';
        this.getWeixinsNoMember();
      },
      /*编辑*/
      handleEdit(index,row){
        this.dialogVisible = true;
         this.realName = row.realName;
         this.employeeId = row.employeeId;
         this.userName = row.userName;
         this.telephone = row.telephone;
         this.departmentId = row.departmentId;
         this.id = row.id;
        this.levelId = row.level
      },
      handleUnbundling(index,row) {
        this.$confirm('此操作解除绑定, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             this.unbundling(row);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      unbundling(row){
        let param = {id:row.id};
        apiDataFilter.request({
          apiPath:'wechat.unbundling',
          data:param,
          successCallback:(res)=>{
            this.$message.success('解除成功');
            this.getStaffList();
          }
        })
      }
    },
    created(){
      this.getStaffList();
      this.getDepartments();
    }
  }
</script>

<style scoped lang='less'>
    @import "staff.less";
</style>
